<template>
  <div class="homePage" v-loading:[loadingText]="loading">
    <!--头部-->
    <ul class="header">
      <!--头像-->
      <li class="avatar">
        <img :src="avatarImg" />
      </li>
      <li @click="clickRecord" :class="{ 'activeMenu': activeMenu == 1 }">记录</li>
      <li @click="clickDynamicLibrary" :class="{ 'activeMenu': activeMenu == 2 }">动态库</li>
    </ul>
    <!--中间内容-->
    <div class="main-content">
      <!--列表内容-->
      <div class="card" v-for="(cardItem, cardIdx) in checkInList" :key="cardIdx">
        <div class="content">{{ cardItem.content }}</div>
        <div class="card-footer">
          <span class="time">{{ cardItem.time }}</span>
          <span class="author">{{ cardItem.author }}</span>
        </div>
      </div>
      <!--打卡按钮新的分支-->
      <a class="track-btn" ref="trackBtn" @click="goCheckIn">
        <span>打卡</span>
      </a>
    </div>
    <div class="checkIn-container" v-if="showCheckInDialog">
      <checkInDialog @closeCheckInDialog="closeCheckInDialog" :key="checkInKey" />
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import avatar from '@/assets/img/homePage/avatar.jpg'
import checkInDialog from '@/components/checkInDialog/index.vue'
import loading from '@/components/loading/index.vue'

export default {
  name: 'homePage',
  components: {
    checkInDialog,
    loading
  },
  setup() {
    // const chackInMessage = ref('')
    // const trackBtn = ref(null)
    const loadingText = ref('正在加载')
    const loading = ref(true)
    // 用户头像
    const avatarImg = ref(avatar)
    // 激活的导航
    const activeMenu = ref(1)
    // 显示的动态列表
    let checkInList = reactive([])
    // 打卡的弹窗
    const showCheckInDialog = ref(false)
    // 打卡的key
    const checkInKey = ref(0)
    setTimeout(() => {
      loading.value = false 
    }, 4000);

    onMounted(() => {
      checkInList.push({
        content: '运动',
        author: '陈永仁',
        time: '2024-04-03 17:46'
      },
        {
          content: `今天学习打卡
          1、学习乐理知识，关于黑键出发的自然大调，遵循全全半全全全半的规则，和白键是一样的。
          2、自然大调的内部规则除了全全半全全全半以外，还要遵循音阶的规则，7个音必须相邻递进。
          3、等音调的概念。
          4、在乐理中理论存在35中自然大调，或者说有无穷的自然大调。但是常用的调号包括等音调只有15中。在我们实际听感中其实只有12个，7个白键和5个黑键
          5、结束`,
          author: '陈永仁',
          time: '2024-04-03 17:46'
        },
        {
          content: `运动打卡
          1、晨练
          学习打卡
          1、水草的正确种植方法：整棵水草，例如红宫廷水草，在种植的时候只需要保留食指长度的根茎和叶，水草头部多出的部分要剪去再种植。并且种植的时候要将根茎部分的叶子去掉，大概去掉两到三截的根茎的树叶，种下时才更有利与水草的根部发芽张根。
          2、虾苗过水细节，经过多次的养虾经验，观赏虾离开原产地后，再进入你的鱼缸之前，要进行过水（就是要将自己鱼缸的水和原产地带来的水先混合让其适应过程），虾的过水要慢，不能直接把自己鱼缸的水倒入，而是缓慢放入一部分，等适应后再慢慢放入一部分，用滴水的方式或者小量多次的灌水方式让虾苗适应，从而减少虾的损耗
          3、乐理知识学习 - 音阶的概念，要点，作用`,
          author: '陈永仁',
          time: '2024-04-03 17:46'
        })
    })

    const closeCheckInDialog = () => {
      checkInKey.value++
      showCheckInDialog.value = false
    }

    const goCheckIn = () => {
      showCheckInDialog.value = true
    }

    const clickRecord = () => {
      activeMenu.value = 1
    }

    const clickDynamicLibrary = () => {
      activeMenu.value = 2
    }

    return {
      loadingText,
      loading,
      checkInKey,
      activeMenu,
      avatarImg,
      checkInList,
      showCheckInDialog,
      goCheckIn,
      clickRecord,
      clickDynamicLibrary,
      closeCheckInDialog
    }
  }
}
</script>

<style lang="scss">
.homePage {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: $color-background;
  overflow: hidden;

  >.header {
    width: 100%;
    height: 60px;
    padding: 10px;
    display: flex;
    align-items: center;

    li {
      color: $color-text-d;
      font-size: 16px;
      margin-left: 25px
    }

    .activeMenu {
      font-size: 17px;
      font-weight: bold;
    }

    /**头像 */
    .avatar {
      margin: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;

      >img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .main-content {
    position: relative;
    width: 100%;
    height: calc(100% - 80px);
    padding: 10px;
    overflow-y: auto;

    .card {
      margin-top: 10px;
      background-color: #fff;
      border-radius: 5px;
      padding: 10px 15px;
      box-shadow: 0px 0px 10px 0px #c9c3c3;

      .content {
        font-size: 16px;
        color: #333;
      }

      .card-footer {
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        color: #c9c3c3;
      }
    }

    .track-btn {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: block;
      overflow: hidden;
      border-radius: 25px;
      width: 130px;
      height: 40px;
      background-color: #66f;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      color: #fff;

      span {
        position: relative;
        // pointer-events 属性定义元素是否对指针事件做出反应
        pointer-events: none; // 不加会卡顿
      }

      &::before {
        --size: 0;
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        height: var(--size);
        background-image: radial-gradient(circle closest-side, #09f, transparent);
        content: "";
        transform: translate3d(-50%, -50%, 0);
        transition: width 200ms ease, height 200ms ease;
      }

      &:hover::before {
        --size: 400px;
      }
    }
  }
}
.checkIn-container{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  padding-top: 70px;
  background: rgba(#333,0.3);
}

</style>